<html>
<head>
	<script>
		function showHideDiv(divId)
		{
			var div = document.getElementById(divId);
			if (div.style.display == "none")
				div.style.display = "inline";
			else 
				div.style.display = "none";
		}
    </script>
	<style type="text/css">
		.action_detail {
			color: blue;
			margin-left: 2em;
			font-family: "tahoma";
			font-size:10px;
		}
		.action_executing {
			color: red;
			background: url(http://localhost/timeline/webapp/images/red-circle.png) left no-repeat;
			padding-left: 15px;
		}
		
		.action_finished {
			color: green;
			background: url(http://localhost/timeline/webapp/images/green-circle.png) left no-repeat;
			padding-left: 15px;
		}
		
		.action_pending {
			color: gray;
			background: url(http://localhost/timeline/webapp/images/gray-circle.png) left no-repeat;
			padding-left: 15px;
			font-size:13px;
		}
		
		a {
			text-decoration:none;
			font-size:13px;
		}
		a:hover {
			border-style: none none dashed none;
			border-width: 1px;
			border-color: #C0C0C0;
		}
		
		a.button {
			cursor: pointer;
			background: #eee;
			font-family: "tahoma";
			font-size: 10px;
			width: 60px;
			text-align: center;
			border:1px solid #999;
			padding:1px 1px; 
			color: #000;
			text-decoration: none;
		}

		a.button:link {
			color: #000;
		}

		a.button:visited {
			color: #666;
		}

		a.button:hover {
			background: #ddd;
			border:1px solid #999;
			font-weight: bold;
			color: #000;
		}
	</style>
</head>
<body oncontextmenu="return false;">
	<div>
		<!-- <a href="javascript:showHideDiv('div1');" class="action_executing">SATISFIES A1, G1</a>
		<br />
		<div id="div1" style="display:none;" class="action_detail">
			Executing, Start: 10:10<br />
		</div>
		<a href="javascript:showHideDiv('div2');" class="action_finished">SATISFIES A2, G2</a>
		<br />
		<div id="div2" style="display:none;" class="action_detail">
			Executing, Start: 10:10	<br />
		</div>
		<span class="action_pending">Executing, Start: 10:10</span><br />
		-->
		<!--ACTIONS-->
	</div>
</body>
</html>
